@extends('WShop::layout')
@push('styles')
    <link rel="stylesheet" type="text/css" href="{{asset(config('view.frontend.wap_login').'/css/idangerous.swiper.css')}}">
    <style type="text/css">
        .layui-m-layerchild h3 {margin-top: 0px;}
    </style>
@endpush
@section('content')
    @component('WShop::public.header')
        @slot('page_title'){{$page_title}} @endslot
    @endcomponent
    <div class="mui-content mui-scroll-wrapper" id="pullrefresh">
        <div class="mui-scroll">

            <div class="mui-table-view mui-table-view-chevron mui-bottom mui-jifen-duihuan">

                @if($info->level < $sys_level)
                    <div class="swiper-container">
                        <div class="swiper-wrapper" > <!--First Slide-->
                            @for($i=$next_level;$i<=$sys_level;$i++)
                                <div class="swiper-slide" data-level="{{$i}}" data-money="{{format_rule(json_decode(get_rule('bill_money')))[$i][1]}}">
                                    <div class="mui-dongjie-header mui-text-center swiper-container">
                                        <div class="flex" >
                                            <div class="flex-item mui-text-center">
                                                <span class="mui-text-bai">当前级别</span>
                                                <p class="mui-text-bai"> {{get_user_level($info->level)}} </p>
                                            </div>
                                            <img src="{{asset(config('view.frontend.wap_login').'/images/right.png')}}"
                                                 style="width: 50px;height: 48px">
                                            <div class="flex-item mui-text-center">
                                                <span class="mui-text-bai">升级级别</span>
                                                <p class="mui-text-bai"> {{get_user_level($i)}} </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endfor
                        </div>
                    </div>
                @else
                    <div class="mui-dongjie-header mui-text-center swiper-container">
                        <div class="flex">
                            <div class="flex-item mui-text-center">
                                <span class="mui-text-bai">当前级别</span>
                                <p class="mui-text-bai"> {{get_user_level($info->level)}} </p>
                            </div>
                        </div>
                    </div>
                @endif

                    <div class="jifen-duihuan-main">
                        @if($info->level < $sys_level)
                            <div class="jifen-duihuan-list bg-fff">
                                <p class="duihuan_header">升级规则</p>
                                <h4 style="color: cadetblue;font-weight: bold;">金额</h4>
                                <div>
                                    <span class="mui-text-red">@if(config('website.up_level_type') == 1) {{format_rule(json_decode(get_rule('bill_money')))[$next_level][1]}} @else {{format_rule(json_decode(get_rule('bill_money')))[$next_level][1] - format_rule(json_decode(get_rule('bill_money')))[$info->level][1]}} @endif</span>
                                    <span style="font-size: 12px;">元</span>
                                </div>
                                <input type="hidden" name="up_level" value="{{$next_level}}"/>
                                <a href="javascript:;" id="upgrade_apply" class="mui-btn mui-btn-blue">立即升级</a>
                            </div>

                        @else
                            <div class="jifen-duihuan-list bg-fff">
                                <a href="javascript:;" disabled class="mui-btn mui-disabled" style="margin-top: 20px;">已达到系统最高级别</a>
                            </div>

                        @endif
                    </div>

            </div>
        </div>
    </div>

    @include('WShop::public.foot_bar',['active'=>'upgrade'])
@endsection
@push('scripts')
    <script>
        var btns = $('#upgrade_apply')
        for(var i=0;i<btns.length;i++){
            btns[i].addEventListener('tap',function(){
                mui.confirm('确定要升级？','提示',function(e){
                    if(e.index==1){
                        sendUpgrade();
                    }
                })
            })
        }
    </script>
    <script>
        function sendUpgrade()
        {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                type: 'post',
                url: "{{route('f_Wap_User_up_level')}}",
                data:{'up_level': $("input[name='up_level']").val()}
            }).done(function (response) {
                if(response.status){
                    mui.toast(response.msg);
                    setTimeout(function () {
                        location.href = response.url;
                    }, 2000);
                }else{
                    mui.toast(response.msg);
                }
            }).fail(function (XMLHttpRequest) {
                if (XMLHttpRequest.status == 422) {
                    var errors = XMLHttpRequest.responseJSON.errors;
                    if(typeof errors == 'object') {
                        for (var index in errors) { // 不推荐这样
                            mui.toast(errors[index][0]);
                            break;
                        }
                    }else{
                        mui.toast(XMLHttpRequest.responseJSON.msg);

                    }
                }else{
                    mui.toast('网络异常,请检查连接');
                }

            }).always(function () {

            });
        }
    </script>

    <script src="{{asset(config('view.frontend.wap_login').'/js/idangerous.swiper.min.js')}}"></script>
    <script type="text/javascript">
        var my_money = "{{format_rule(json_decode(get_rule('bill_money')))[$info->level][1]}}"
        var up_level_type = "{{config('website.up_level_type')}}" ;
        var mySwiper = new Swiper('.swiper-container',{
            speed:500,
            mode:'horizontal',
            loop: true,
            onSlideChangeStart: function(){
                var level = mySwiper.activeSlide().data('level');
                var money = mySwiper.activeSlide().data('money')
                var cha_money = parseFloat(money) - parseFloat(my_money);
                var need_money = 0 ;
                $("input[name='up_level']").val(parseInt(level));
                if(parseInt(up_level_type) == 1){
                    need_money = money ;
                }else{
                    need_money = cha_money ;
                }
                $(".mui-text-red").html(need_money);
            }
        });
    </script>


@endpush